<template>
  <div>
    <div class="fly-home fly-panel" style="background-image: url();">
      <img
        :src="userInfo.pic? userInfo.pic:'https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg'"
      />
      <!-- <i class="iconfont icon-renzheng" title="Imooc社区认证"></i> -->
      <h1>
        {{userInfo.name}}
        <i class="iconfont icon-nan" v-if="!userInfo.gender"></i>
        <i class="iconfont icon-nv" v-else></i>
        <i class="layui-badge fly-badge-vip ml1">{{userInfo.isVip? `VIP${userInfo.isVip}`: '非VIP'}}</i>
        <!--
    <span style="color:#c00;">（管理员）</span>
    <span style="color:#5FB878;">（社区之光）</span>
    <span>（该号已被封）</span>
        -->
      </h1>

      <!-- <p style="padding: 10px 0; color: #5FB878;">认证信息：layui 作者</p> -->

      <p class="fly-home-info">
        <i class="iconfont icon-kiss" title="飞吻"></i>
        <span style="color: #FF7200;">{{userInfo.favs}} 积分</span>
        <i class="iconfont icon-shijian"></i>
        <span>{{userInfo.created | formatDate}}</span>
        <i class="iconfont icon-chengshi"></i>
        <span>来自{{userInfo.location}}</span>
      </p>

      <p class="fly-home-sign">{{userInfo.remark}}</p>

      <div class="fly-sns" data-user>
        <a
          href="javascript:;"
          class="layui-btn layui-btn-primary fly-imActive"
          data-type="addFriend"
        >加为好友</a>
        <a href="javascript:;" class="layui-btn layui-btn-normal fly-imActive" data-type="chat">发起会话</a>
      </div>
    </div>

    <div class="layui-container">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md6 fly-home-jie">
          <div class="fly-panel">
            <h3 class="fly-panel-title">{{userInfo.name}} 最近的提问</h3>
            <ul class="jie-row">
              <template v-if="postList.length>0">
                <li v-for="(item,index) in postList" :key="'postList' + index">
                  <span class="layui-badge" :class="tag.class" v-for="(tag,index) in item.tags" :key="'tag'+ index">{{tag.name}}</span>
                  <router-link :to="{name: 'detail' ,params: {tid: item._id}}" class="jie-title link">{{item.title}}</router-link>
                  <i>{{item.created | formatDate}}</i>
                  <em class="layui-hide-xs">{{item.reads}}阅/{{item.answer}}答</em>
                </li>
              </template>

              <div v-else class="fly-none" style="min-height: 50px; padding:30px 0; height:auto;"><i style="font-size:14px;">没有发表任何求解</i></div>
            </ul>
          </div>
        </div>

        <div class="layui-col-md6 fly-home-da">
          <div class="fly-panel">
            <h3 class="fly-panel-title">{{userInfo.name}} 最近的回答</h3>
            <ul class="home-jieda">
              <template v-if="commentList.length > 0">
                <li v-for="(item,index) in commentList" :key="'comment' +index">
                  <p>
                    <span>{{item.created | formatDate}}</span>
                    在
                    <router-link :to="item.tid? {name:'detail','params': {tid:item.tid._id}}: {name: '404'}" >{{item.tid ? item.tid.title :'该贴已被删除'}}</router-link>中回答：
                  </p>
                  <div class="home-dacontent" v-richtext="item.content">

                  </div>
                </li>
              </template>
              <div v-else class="fly-none" style="min-height: 50px; padding:30px 0; height:auto;"><span>没有回答任何问题</span></div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyPost, getUserInfo } from '@/api/user'
import { getUserComments } from '@/api/comments'
export default {
  name: 'user',
  props: ['uid'],
  data () {
    return {
      userInfo: {},
      commentList: [],
      postList: []
    }
  },
  mounted () {
    this.getPost()
    this.getComment()
    this.getUser()
  },
  methods: {
    async getPost () {
      const res = await getMyPost({ uid: this.uid })
      if (res.code === 200) {
        this.postList = res.data
      }
    },
    async getComment () {
      const res = await getUserComments({ uid: this.uid })
      if (res.code === 200) {
        this.commentList = res.data
      }
    },
    async getUser () {
      const res = await getUserInfo({ uid: this.uid })
      if (res.code === 200) {
        this.userInfo = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
